@model VirtoCommerce.Platform.Web.Model.Home.IndexModel
@{
    ViewData["FacebookPixelId"] = Model.WebAnalyticsOptions.FacebookPixelId;
}

@section scripts
{
    <script>
        $(function () {
            $('.main-content')
                .on("mousewheel DOMMouseScroll",
                    function (e) {
                        var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);
                        if (Math.abs(delta) >= 120) {
                            delta = delta / 40;
                        }
                        this.scrollLeft -= (delta * 30);
                        e.preventDefault();
                    });
        });
    </script>

    <script>
        window.onerror = function (msg, url, line, col, error) {

            if (msg.startsWith('Uncaught Error: [$injector:')) {
                $("div.error-feature").show();
                $("#scriptError").text(error && error.stack ? error.stack : msg);

                $.ajax({
                    type: "GET",
                    url: "api/platform/diagnostics/errors",
                    success: (data) => {
                        var modulesWithErrors = data;
                        if (modulesWithErrors.length > 0) {
                            $("div.error-content").show();

                            modulesWithErrors.forEach(module => {
                                $("#moduleInfo").append(` <button type="button" class="collapsible">${module.id} - version:${module.version}</button> <div class="content"> ${module.validationErrors.join(';')} </div>`);
                            });
                            addListenersToButton();
                        }
                    },
                    failure: (errMsg) => $("#scriptError").text(errMsg)
                });
            }
        }

        addListenersToButton = function () {
            const coll = document.getElementsByClassName("collapsible");
            for (let i = 0; i < coll.length; i++) {
                coll[i].addEventListener("click", function() {
                    this.classList.toggle("active");
                    let content = this.nextElementSibling;
                    if (content.style.display === "block") {
                        content.style.display = "none";
                    } else {
                        content.style.display = "block";
                    }
                });
            }
        }
        
        window.forceWebSockets = @($@"{Model.ForceWebSockets}".ToLower());
    </script>
}

<script id="template/pagination/pagination.html" type="text/ng-template">
    <ul class="menu __inline">
        <li class="menu-item" ng-if="boundaryLinks" ng-class="{__disabled: noprevious()}"><a class="menu-link" href ng-click="selectPage(1)">{{getText('first')}}</a></li>
        <li class="menu-item" ng-if="directionLinks" ng-class="{__disabled: noprevious()}"><a class="menu-link" href ng-click="selectPage(page - 1)">&larr;</a></li>
        <li class="menu-item" ng-repeat="page in pages track by $index" ng-class="{__selected: page.active}"><a class="menu-link" href ng-click="selectPage(page.number)">{{page.text}}</a></li>
        <li class="menu-item" ng-if="directionLinks" ng-class="{__disabled: nonext()}"><a class="menu-link" href ng-click="selectPage(page + 1)">&rarr;</a></li>
        <li class="menu-item" ng-if="boundaryLinks" ng-class="{__disabled: nonext()}"><a class="menu-link" href ng-click="selectPage(totalPages)">{{getText('last')}}</a></li>
    </ul>
</script>

<!-- <div ng-class="{'demo-warning': demoResetTime}" ng-if="demoResetTime">
    <span ng-bind-template="This is a demo VirtoCommerce Manager. This site is reset to its original state every day. The next reset will be in about"></span>
    <b ng-bind-template="{{ demoResetTime | amDifference : moment.utc() : 'minutes' | amDurationFormat : 'minutes' }}"></b>.
</div> -->

<div class="platform-error-bar" ng-if="platformError.title.length" ng-cloak>
    <a class="close" ng-click="closeError()"><i class="fa fa-remove"></i> </a>
    <div class="error-title">
        {{ platformError.title }}
        <a class="more" href="" ng-click="platformError.detailVisible = !platformError.detailVisible" ng-if="!platformError.detailVisible">Show me technical details</a>
        <a class="more" href="" ng-click="platformError.detailVisible = !platformError.detailVisible" ng-if="platformError.detailVisible">Hide the technical details</a>
    </div>
    <div class="error-detail" ng-if="platformError.detailVisible" ng-bind-html="platformError.detail"></div>
</div>


<div class="error-feature" style="display:none">
    <h1 style="padding-top: 50px; padding-left: 50px; ">Startup error</h1>
    <p style="padding: 15px 0 10px 50px; font-size: 24px">The script injection error occurred:</p>
    <textarea id="scriptError" class="textarea-error error-text" readonly></textarea>
    <div class="error-content" style="display:none">
        <p style="padding-top: 10px; padding-left: 50px; font-size: 24px;">The following modules were loaded with errors:</p>
        <div id="moduleInfo" class="error-text">
        </div>
    </div>
</div>
<ui-view></ui-view>
